<script setup>
import { ref } from 'vue'
import { getField } from '@/api/equipment/fields'
import { getDeviceOrList } from '@/api/equipment/device'
import { useAdminStore } from '@/stores';
import { getVendorList } from '@/api/setting'
// 获取部门信息
const adminStore = useAdminStore()
const deptProps = ref({
  value: 'id',
  label: 'name',
  children: 'children'
})
//


// 供应商信息
const vendorList = ref([
{
    id: 0,
    name: '',
    type: ''
  }
])
getVendorList().then(res => {
  vendorList.value = res.data.data
})
// 表格信息
// const deviceModel = ref([
//   { id: 1, name: 'name', descrpition: '设备名称' },
//   { id: 2, name: 'typeId', descrpition: '设备类型' },
//   { id: 3, name: 'code', descrpition: '设备编号' },
//   { id: 4, name: 'model', descrpition: '规格型号' },
//   { id: 5, name: 'vendorId', descrpition: '供应商名称' },
//   { id: 9, name: 'deviceStatusId', descrpition: '设备状态' },
//   { id: 6, name: 'useStatusId', descrpition: '使用状态' },
//   { id: 7, name: 'purchaseDate', descrpition: '购入日期' },
//   { id: 8, name: 'deptId', descrpition: '使用部门' },
// ])
const deviceType = ref([
  {
    id: 0,
    name: '',
    type: ''
  }
])
const deviceStatus = ref([
  {
    id: 0,
    name: '',
    type: ''
  }
])
const useStatus = ref([
  {
    id: 0,
    name: '',
    type: ''
  }
])
getField().then(res => {
  deviceStatus.value = res.data.data.filter(item => item.type === 'deviceStatus')
  useStatus.value = res.data.data.filter(item => item.type === 'useStatus')
  deviceType.value = res.data.data.filter(item => item.type === 'deviceType')
  console.log('useStatus', useStatus.value)
})
// 初始化table
const deviceInfo = ref({
  id: '',
  name: null,
  typeId: '',
  code: null,
  model: '',
  vendorId: '',
  deviceStatusId: '',
  useStatusId: '',
  purchaseDate: [],
  deptId: '',
  page: 1,
  pageSize: 10,
  total: 100,
})
const deviceList = ref([])
getDeviceOrList(deviceInfo.value).then(res => {
  console.log(res)
  deviceList.value = res.data.data.records
  deviceInfo.value.total = res.data.data.total
})
// 重置
const searchRef = ref()
function resetDevice() {
  searchRef.value.resetFields()
}
// 搜索
function searchDevice() {
  getDeviceOrList(deviceInfo.value).then(res => {
    deviceList.value = res.data.data.records
    deviceInfo.value.total = res.data.data.total
  })
}
async function handleChange() {
  await getDeviceOrList(deviceInfo.value).then(res => {
    console.log(res)
    deviceList.value = res.data.data.records
    deviceInfo.value.total = res.data.data.total
  })
}
</script>

<template>
  <el-row class="search-box">
    <el-form :inline="true" class="search" size="small" :model="deviceInfo" ref="searchRef">
      <el-form-item label=" 设备名称" prop="name">
        <el-input v-model="deviceInfo.name" style="width: 250px;"></el-input>
      </el-form-item>
      <el-form-item label="设备编号" prop="code">
        <el-input v-model="deviceInfo.code" style="width: 250px;"></el-input>
      </el-form-item>
      <el-form-item label="设备类型" prop="typeId">
        <el-select v-model="deviceInfo.typeId" style="width: 160px;">
          <el-option v-for="item in deviceType" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="规格型号" prop="model">
        <el-input v-model="deviceInfo.model" style="width: 250px;"></el-input>
      </el-form-item>
      <el-form-item label="设备状态" prop="deviceStatusId">
        <el-select v-model="deviceInfo.deviceStatusId" style="width: 160px;">
          <el-option v-for="item in deviceStatus" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="使用部门" prop="deptId">
        <el-cascader v-model="deviceInfo.deptId" :options="adminStore.deptList" :props="deptProps"
          style="width: 250px;"></el-cascader>
      </el-form-item>
      <el-form-item label="供应商名称" prop="vendorId">
        <el-select v-model="deviceInfo.vendorId" style="width: 250px;">
          <el-option v-for="(item, index) in vendorList" :key="index" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item style="width:550px" label="购入日期" prop="purchaseDate">
        <el-date-picker v-model="deviceInfo.purchaseDate" type="daterange" unlink-panels range-separator="至"
          start-placeholder="开始日期" end-placeholder="结束日期" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" plain style="width:60px" @click="resetDevice">重置</el-button>
        <el-button type="primary" style="width:150px" @click="searchDevice">搜索</el-button>
      </el-form-item>
    </el-form>
  </el-row>
  <!-- <el-divider border-style="dashed" /> -->
  <el-row class="operate">
    <el-button type="primary" size="small" style="width:150px; padding:0 20px"
      @click="$router.push('/equipment/adddevice')">单个新增</el-button>
    <el-button type="primary" size="small" style="width:150px; padding:0 20px">模板下载</el-button>
    <el-button type="primary" size="small" style="width:150px; padding:0 20px">批量新增</el-button>
    <el-button type="warning" size="small" style="width:150px; padding:0 20px">批量删除</el-button>
    <el-button type="primary" size="small" style="width:150px; padding:0 20px">导出</el-button>
    <el-divider direction="vertical" width="200px" />
    <el-form style="text-align: center;" size="small">
      <el-text style="width:150px; padding:0 50px; line-height: 36px;">状态修改：</el-text>
      <el-select style="width: 150px;">
        <el-option v-for="item in useStatus" :key="item.id" :label="item.name" :value="item.id" />
      </el-select>
      <el-button type="primary" style="width:150px; margin:0 50px">修改</el-button></el-form>

  </el-row>
  <el-divider border-style="dashed" />
  <el-row>
    <el-table ref="deviceRef" :data="deviceList">
      <el-table-column header-align="center" align="center" type="selection" width="55"></el-table-column>
      <el-table-column type="expand">
        <template #default="props">
          <el-row>
            <el-col :span="6">使用年限：{{ props.row.servicePeriod }}年</el-col>
            <el-col :span="6">折旧年限：{{ props.row.depreciationPeriod }}年</el-col>
            <el-col :span="6">创建时间：{{ props.row.createTime }}</el-col>
            <el-col :span="6">修改时间：{{ props.row.updateTime }}</el-col>
          </el-row>
          <!-- <el-row>图片</el-row>
          <el-row>文件</el-row> -->
        </template>
      </el-table-column>
      <el-table-column header-align="center" align="center" type="index" label="序号" width="80"></el-table-column>
      <!-- <el-table-column header-align="center" align="center" v-for="item in deviceModel" :key="item.id"
        :label="item.descrpition" :prop="item.name">
        <template #default="{ row }">
          {{ item.name === 'typeId' ? deviceType.find(type => type.id === row[item.name]).name : (item?.name ===
            'useStatusId' ? useStatus.find(status => status.id === row[item.name]).name : (item.name ===
              'deviceStatusId' ? deviceStatus.find(status => status.id === row[item.name]).name :
              (item.name === 'deptId' ? adminStore.deptSelectList.find(dept => dept.id === row[item.name]).name :
                (item.name === 'vendorId' ? vendorList.find(vendor => vendor.id === row[item.name]).name : row[item.name]))))
          }}
        </template>
      </el-table-column> -->
      <el-table-column align="center" label="设备名称" prop="name"></el-table-column>
      <el-table-column align="center" label="设备类型">
        <template #default="{row}">
          {{ deviceType.find(item => item.id === row.typeId).name }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="设备编号" prop="code"></el-table-column>
      <el-table-column align="center" label="规格型号" prop="model"></el-table-column>
      <el-table-column align="center" label="供应商名称" >
        <template #default="{row}">
          {{ vendorList.find(item => item.id === row.vendorId).name }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="设备状态" >
        <template #default="{row}">
          {{ deviceStatus.find(item => item.id === row.deviceStatusId).name }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="使用状态" >
        <template #default="{row}">
          {{ useStatus.find(item => item.id === row.useStatusId).name }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="购入日期" prop="purchaseDate"></el-table-column>
      <el-table-column align="center" label="使用部门" >
        <template #default="{row}">
          {{ adminStore.deptSelectList.find(item => item.id === row.deptId).name }}
        </template>
      </el-table-column>
      <el-table-column header-align="center" align="center" label="操作">
        <template #default="{ row }">
          <el-icon color="var(--el-color-primary)" @click="edit(row)">
            <Edit />
          </el-icon>
          <el-icon color="var(--el-color-danger)" @click="remove(row)">
            <DeleteFilled />
          </el-icon>
        </template>
      </el-table-column>
      <template #empty>
        <el-empty description="暂无数据" />
      </template>
    </el-table>
    <!-- <el-pagination layout="prev, pager, next" :total="50" /> -->
    <el-pagination class="pagination" v-model:current-page="deviceInfo.page" v-model:page-size="deviceInfo.pageSize"
      :page-sizes="[10, 20, 30, 40]" size="small" layout="total, sizes, prev, pager, next, jumper"
      :total="deviceInfo.total" @change="handleChange" />
  </el-row>

</template>

<style scoped lang="less">
.search-box {
  background-color: var(--el-color-primary-light-8);
}

.search {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin: 10px 20px 10px;

  .el-form-item {
    margin: 8px 32px 8px 0;
  }
}

.el-divider {
  margin: 10px 0px;
}

.operate {
  display: flex;
  justify-content: space-between;
  margin: 10px 20px;
  align-items: center;
}

.pagination {
  display: flex;
  justify-content: flex-end;
  margin-left: auto;
  margin-top: 20px;
  margin-right: 50px;
}

.el-icon:first-child {
  margin-right: 8px;
}

:deep(.el-table__expanded-cell) {
  padding: 8px 30px 8px 150px;
}
</style>